<template>
  <div id="wrap">
    <div class="wrapitem"></div>
    <div class="wrapitem">
      <!-- <transition-group
        name="run"
        :duration="{ enter: 400, leave: 1000 }"
        @after-enter="afterEnter"
      >
        
      </transition-group> -->
      <p class="cn1 fly-in-text">天津外商投资环境及政策指引</p>
      <p class="en1 fly-in-text">
        TIANJIN FOREIGN INVESTMENT ENVIRONMENT AND POLICY GUIDELINES
      </p>
      <p class="cn2 fly-in-text">活力天津 走向世界</p>
      <p class="en2 fly-in-text">A DYNAMIC TIANJIN GOING GLOBAL</p>
      <!-- <router-link to="/home">Go to Example page</router-link> -->
    </div>
    <div class="wrapitem"></div>
    <div class="wrapitem"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isShow: true,
    };
  },
  created() {},
  mounted() {
    let that = this;
    // setTimeout(function () {
    //   // 需要延迟执行的语句
    //   that.isShow = true;
    // }, 1000);
    setTimeout(function() {
        // 需要延迟执行的语句
        that.$router.replace('/qianyan');
      }, 6000);
  },
  methods: {
    // afterEnter: function () {
    //   let that = this;
    //   that.$router.replace('/home');
    //   setTimeout(function() {
    //     // 需要延迟执行的语句
    //     that.$router.replace('/home');
    //   }, 1500);
    // },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.fly-in-text {
  opacity: 0; /** 初始状态为不可见 */
  /* animation: fly-in 3s ease-in-out forwards; */
  animation: 5s fade-in forwards;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@font-face {
  font-family: "PangMenZhengDaoCuShuTi";
  src: url("~@/assets/fonts/PangMenZhengDaoCuShuTi-2.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'pangmen';
  src: url('~@/assets/fonts/pangmen.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AlimamaShuHeiTi";
  src: url("~@/assets/fonts/AlimamaShuHeiTi-Bold.otf");
  font-weight: normal;
  font-style: normal;
}

#wrap {
  background: url("~@/assets/img/back.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapitem {
  flex: 1;
  text-align: center;
}

.cn1 {
  color: #ffffff;
  font-weight: bold;
  font-family: "AlimamaShuHeiTi";
  font-size: 3rem;
  margin: 0;
  text-shadow: 1px 1px 1rem black;
}
.en1 {
  color: #ffffff;
  font-weight: bold;
  font-family: "AlimamaShuHeiTi";
  font-size: 1.5rem;
  text-shadow: 1px 1px 1rem black;
}

.cn2 {
  color: #ffffff;
  font-family: "pangmen";
  font-size: 9rem;
  margin: 0;
  text-shadow: 1px 1px 1rem black;
}
.en2 {
  color: #ffffff;
  font-weight: bold;
  font-size: 2rem;
  margin: 0;
  text-shadow: 1px 1px 1rem black;
  letter-spacing: 0.3rem;
}
</style>
